<template>
    <div class="body">
        <el-col class="main">
            <el-row style="height: 100%">
                <el-col class="mtitle">
                    <div class="icon"><img :src="user.icon"></div>
                    <span style="font-size:25px;color:#555 ">{{title}}</span>
                </el-col>
                <el-col class="mbody">
                    <!--消息列表-->
                    <div v-show=is1>
                        <el-table :data="msglist" :show-header=false>
                            <el-table-column>
                                <template scope="scope">
                                    <router-link :to="{path:'/message/'+scope.row.uid}" replace>
                                        <div class="coltmp">
                                            <div class="icon"><img :src="scope.row.icon"></div>
                                            <div class="ib"> {{scope.row.name}}
                                            </div>
                                            <div class="badge">
                                                <el-badge :value="scope.row.msgcount" :hidden="(scope.row.msgcount===0)"
                                                          :max="99"/>
                                            </div>
                                            <div class="time">{{scope.row.time | totime}}</div>

                                        </div>
                                    </router-link>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <!--好友列表-->
                    <div v-show=is2 class="exp">
                        <el-table :data="flist" :show-header=false>
                            <el-table-column type="expand">
                                <template scope="scope">

                                    <el-table :data="scope.row.list" :show-header=false>
                                        <el-table-column>
                                            <template scope="scope">
                                                <router-link :to="{path:'/message/'+scope.row.uid}" replace>
                                                    <div class="coltmp">
                                                        <div class="icon"><img :src="scope.row.icon"></div>
                                                        <div class="ib"> {{scope.row.name}}
                                                        </div>
                                                        <div class="badge">
                                                        </div>
                                                        <div class="time">{{scope.row.motto}}</div>

                                                    </div>
                                                </router-link>
                                            </template>
                                        </el-table-column>
                                    </el-table>

                                </template>
                            </el-table-column>
                            <el-table-column prop="name">
                            </el-table-column>
                        </el-table>
                    </div>
                    <!--个人资料-->
                    <div v-show=is3 style="padding-right: 5px">
                        <br><br>
                        <el-form ref="form" :model="user" label-width="80px">
                            <el-form-item label="用户名">
                                <el-input v-model="user.name" max="15"></el-input>
                            </el-form-item>
                            <el-form-item label="个性签名">
                                <el-input type="textarea" v-model="user.motto" max="127" autosize></el-input>
                            </el-form-item>
                            <el-form-item label="性别">
                                <el-radio-group v-model="user.sex">
                                    <el-radio label="男"></el-radio>
                                    <el-radio label="女"></el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="msgsave()">保存</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-col>
                <el-col class="mbottom">
                    <el-menu :default-active="menu" class="el-menu-demo" mode="horizontal" @select="changemenu">
                        <el-menu-item index="1" class="bw" @click="changemenu('1')">消息</el-menu-item>
                        <el-menu-item index="2" class="bw" @click="changemenu('2')">好友</el-menu-item>
                        <el-menu-item index="3" class="bw" @click="changemenu('3')">关于我</el-menu-item>
                    </el-menu>
                </el-col>
            </el-row>
        </el-col>
        <div>{{flashlist}}{{userinfo}}{{routermain}}</div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                user: {
                    name: '刘云鹏',
                    motto: '签名',
                    sex: '男',
                    icon: ''
                },
                title: '消息',
                menu: '1',
                msglist: [
                    {
                        time: '14:24',
                        name: '王小虎',
                        icon: 'xxx',
                        uid: '',
                        msgcount: 0
                    }, {
                        time: '14:24',
                        name: '王小虎',
                        icon: 'xxx',
                        uid: '',
                        msgcount: 1
                    }
                ],
                flist: [
                    {
                        gid: '1',
                        name: '好友',
                        list: [
                            {
                                name: '王小虎',
                                icon: 'xxx',
                                uid: '',
                                motto: '这是签名'
                            }
                        ]
                    }
                ],
                glist: [
                    {
                        id: '1',
                        name: ''
                    }
                ]
            }
        },
        methods: {
            msgsave() {
                this.$message({
                    message: '╮(╯▽╰)╭  程序员太懒了,还没有做保存功能......'
                })
            },
            changemenu(key, keyPath) {
                this.menu = key
            },
            dd() {
                this.$store.state.ws.send('{"type":"qulist"}')
            }
        },
        computed: {
            routermain: function () {
                let message
                if (this.$store.state.wsst !== 2) {
                    this.$router.push('/login')
                }
                return ''

            },
            userinfo: {
                get() {
                    let token = this.$store.state.token
                    $.post(
                        '/chat/php/ajax/userinfo.php',
                        {
                            token: token
                        }, (data) => {
                            this.user = data
                        }, 'json'
                    )
                },
                set(val) {
                    $.post(
                        '/chat/php/ajax/setuserinfo.php',
                        val, (data) => {
                            return 1
                        }, 'json'
                    )
                }
            },
            flashlist() {
                let list = this.$store.state.ulist
                let newlist = []
                let glist = []
                let flist = []
                list.forEach((val) => {
                    glist.push({id: val.gid, name: val.gname})
                    let nlist = {}
                    nlist.time = 0
                    val.msg.forEach((v1) => {
                        if (v1.time > nlist.time) {
                            nlist.time = v1.time
                        }
                        if (v1.state === 1) {
                            nlist.msgcount++
                        }
                    })
                    nlist.name = val.petname
                    nlist.icon = val.icon
                    nlist.uid = val.fuid
                    nlist.msgcount = 0
                    newlist.push(nlist)

                })
                glist.forEach((val) => {
                    val.list = []
                    list.forEach((v1) => {
                        if (val.id === v1.gid) {
                            val.list.push({
                                name: v1.petname,
                                icon: v1.icon,
                                uid: v1.fuid,
                                motto: v1.motto
                            })
                            flist.push(val)
                        }
                    })
                })
                this.flist = flist
                this.msglist = newlist
                this.glist = glist

            },
            is1() {
                return this.menu === '1'
            },
            is2() {
                return this.menu === '2'
            },
            is3() {
                return this.menu === '3'
            }
        },
        watch: {
            menu: function (n) {
                switch (n) {
                    case '1':
                        this.title = '消息'
                        break
                    case '2':
                        this.title = '好友'
                        break
                    case '3':
                        this.title = '关于我'
                        break

                }
            }
        }
    }
</script>
<style scoped>

    .body {
        height: 100%;
        background: rgba(0, 0, 0, .3);
    }

    .ib {
        float: left;
        display: inline-block;
        height: 50px;
        line-height: 50px;
        margin: 0;
        padding: 0;

    }

    .time {
        float: right;
        display: inline-block;
        height: 50px;
        line-height: 50px;
        margin: 0;
        padding: 0;
    }

    .badge {

        width: 20px;
        float: right;
        display: inline-block;
        height: 50px;
        line-height: 60px;
        padding-left: 8px;
    }

    .bw {
        width: 33.3333333%;
        text-align: center;
    }

    .coltmp {
        height: 50px;

        width: 100%;
    }

    .icon {
        position: relative;
        overflow: hidden;
        float: left;
        display: inline-block;
        border-radius: 20px;
        height: 40px;
        width: 40px;
        margin: 5px;
    }

    .icon img {
        width: 100%;
        height: 100%;
    }

    .main {
        background: white;
        position: relative;
        width: 400px;
        height: 660px;
        margin-left: -300px;
        left: 50%;
        margin-top: -320px;
        top: 50%;
    }

    .main::-webkit-scrollbar {
        width: 6px;
    }

    .main::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background-color: #E9E9E9;
    }

    .mbody {
        padding-top: 40px;
        margin-top: -40px;
        overflow-x: auto;
        height: 100%;
        padding-bottom: 60px;
        margin-bottom: -60px;
    }

    .mtitle {
        background: #eef1f6;
        position: relative;
        height: 40px;
        z-index: 10;
        padding: 0;
    }

    .mbottom {
        position: relative;
        z-index: 10;
    }

    @media (orientation: Portrait) AND (max-width: 768px) {
        .main {
            position: fixed;
            width: 100%;
            height: 100%;
            margin: 0;
            left: 0;
            top: 0;
        }

        .mbody {
            height: 100%;
        }
    }

    @media (max-width: 768px) {

    }

    @media (min-width: 768px) {

    }

    @media (min-width: 992px) {

    }

    @media (min-width: 1200px) {

    }
</style>